<template>
  <div class="home-wrapper">
    <newNav @openleft="openleft" :selNum="selNum"></newNav>
    <!-- <div class="top-menu">
      <div class="top-return">
        <img src="../assets/return.svg" alt="">
        <span>返回</span>
      </div>
      <div class="top-link">
        <img src="../assets/icon-wallet-yellow.svg" alt="">
        <span>链接钱包</span>
      </div>
    </div> -->
    <!-- <metaboardLogin v-if="showLogin" @jumpSuc="jumpSuc"></metaboardLogin> -->
     <div class="metaboard-box">
       <div v-show="showLeft">
         <metaboardLeft @closeLeft="closeLeft"></metaboardLeft>
       </div>
       <div v-show="(!showLeft && utils.isMobile()) || !utils.isMobile()">
        <metaboardRight></metaboardRight>
       </div>
     </div>
  </div>
</template>

<script>
import homeBottom from '../components/public/homeBottom'
import newNav from '../components/newNav'
import metaboardLeft from './metaboardLeft'
import metaboardRight from './metaboardRight'
import metaboardLogin from './metaboardLogin'
export default {
  name: 'metaboard',
  data () {
    return {
      // showLogin:true,
      showLeft:true,
      selNum:1,
      checkAddress:''
    }
  },  
  components:{ homeBottom,metaboardLeft,metaboardRight,newNav,metaboardLogin },
  mounted() {
    if(this.utils.isMobile()){
      this.showLeft = false;
    }
    if(this.$route.params.id){
      this.checkAddress = this.$route.params.id;
      // this.showLogin = false;
    }
  },
  methods: {
    handleBtnEvent(opts) {
      switch(opts.type){
        case 'route':
        this.$router.push(opts.path)
        break;
        case 'link':
        window.open(opts.link, '_blank');
        break;
        default:
          break
      }
    },
    openleft(data){
      this.showLeft = !this.showLeft;
    },
    closeLeft(){
      this.showLeft = false;
    },
    // //授权登录成功
    // jumpSuc(data){
    //   this.showLogin = false;
    // }
  }
}
</script>

<style scoped lang="scss">

@media only screen and (min-width: 0px) and (max-width: 639px){
  .metaboard-box{
    width: 100%;
    padding-top: 62px;
    display: flex;
    flex-wrap: wrap;
    >div:nth-child(1){
      width: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 1000;
    }
    >div:nth-child(2){
      width: 100%;
    }
  }
  .top-menu{
    width: 100%;
    height:70px;
    background-color: #1E1E1E;
    padding: 16px 35px 16px 60px;
    display: flex;
    justify-content: space-between;
    >.top-return{
      width: 140px;
      height: 38px;
      line-height: 34px;
      border: 1px solid rgba(255, 255, 255, .5);
      border-radius: 19px;
      font-size: 16px;
      img{
        width: 30px;
        vertical-align: inherit;
        margin-right: 15px;
      }
    }
    >.top-link{
      height: 36px;
      padding: 7px 24px;
      color: #EFB133;
      font-size: 16px;
      border: 1px solid #EFB133;
      border-radius: 6px;
      span{
        position: relative;
        top: -6px;
      }
      img{
        width: 22px;
        position: relative;
        top: -2px;
        margin-right: 6px;
      }
    }
  }
}


@media only screen and (min-width: 640px) {
  .metaboard-box{
    padding-top: 84px;
    display: flex;
    >div:nth-child(1){
      width: 350px;
    }
    >div:nth-child(2){
      width: calc(100% - 350px);
    }
  }
  .top-menu{
    width: 100%;
    height:70px;
    background-color: #1E1E1E;
    padding: 16px 35px 16px 60px;
    display: flex;
    justify-content: space-between;
    >.top-return{
      width: 140px;
      height: 38px;
      line-height: 34px;
      border: 1px solid rgba(255, 255, 255, .5);
      border-radius: 19px;
      font-size: 16px;
      img{
        width: 30px;
        vertical-align: inherit;
        margin-right: 15px;
      }
    }
    >.top-link{
      height: 36px;
      padding: 7px 24px;
      color: #EFB133;
      font-size: 16px;
      border: 1px solid #EFB133;
      border-radius: 6px;
      span{
        position: relative;
        top: -6px;
      }
      img{
        width: 22px;
        position: relative;
        top: -2px;
        margin-right: 6px;
      }
    }
  }
}

</style>
